(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "maishu-jueying"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const maishu_jueying_1 = require("maishu-jueying");
    class DataTransfer {
        constructor() {
            this.values = {};
        }
        setData(key, value) {
            this.values[key] = value;
        }
        getData(key) {
            return this.values[key];
        }
    }
    exports.DataTransfer = DataTransfer;
    class ComponentPanel extends React.Component {
        constructor(props) {
            super(props);
            this.COMPONENT_DATA = "component-data";
            this.targetElements = [];
            this.state = { components: [] };
        }
        get element() {
            return this.toolbarElement;
        }
        setComponets(componets) {
            this.setState({ components: componets }, () => {
                $(this.element).find("li").draggable({
                    // connectToSortable: $(".user-page"),
                    helper: "clone",
                    revert: "invalid"
                });
            });
        }
        addDropTarget(targetElement) {
            // console.log(`ComponentPanel: ${targetElementsId}`);
            this.targetElements.push(targetElement);
            $(this.element).find("li").draggable("option", "connectToSortable", this.targetElements);
        }
        componentDidMount() {
        }
        render() {
            let empty = this.props.empty || React.createElement("div", { className: "empty" }, "\u6682\u65E0\u53EF\u7528\u7EC4\u4EF6");
            let props = Object.assign({}, this.props);
            let componets = this.state.components || [];
            return React.createElement("ul", Object.assign({}, props, { className: `${maishu_jueying_1.classNames.componentPanel}`, ref: (e) => this.toolbarElement = this.toolbarElement || e }), componets.length == 0 ? empty : componets.map((c, i) => {
                let props = { key: i };
                props[this.COMPONENT_DATA] = JSON.stringify(c.componentData);
                return React.createElement("li", Object.assign({}, props),
                    React.createElement("div", { className: "btn-link" },
                        React.createElement("i", { className: c.icon, style: { fontSize: 44, color: 'black' }, ref: e => {
                                if (!e)
                                    return;
                            } })),
                    React.createElement("div", null, c.displayName));
            }));
        }
    }
    exports.ComponentPanel = ComponentPanel;
});
